import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Tooltip from '@kuiper-components/tooltip';
import Input from '@kuiper-components/input';
import Icon from './icon';
import { Link } from 'react-router-dom';

import WarningsStatusEdit from '../../../../../../components/WarningsStatusEdit';
import Empty from '../../../../../../components/empty/EmptyData';
import CopyBoard from '../../../../../../components/CopyBoard';
import { datetime } from '../../../../../../../common/formatter';

import EventDetail from './EventDetail';
import s from './style.module.css';

function warningStatsBuilder(warning = {}, modifiedAble = true) {
	let text;
	if (warning.ignoredTime) {
		text = (
			<Tooltip
				placement="top"
				overlay={
					<span className={s.time}>
						忽略操作: {datetime(warning.ignoredTime)}
					</span>
				}
			>
				<span className={s.ignored}>已忽略</span>
			</Tooltip>
		);
	} else if (warning.isResolved) {
		text = <span className={s.resolved}>已处理</span>;
	} else {
		text = <span className={s.notResolved}>待处理</span>;
	}
	return text;
}
function Table({
	className,
	title,
	data,
	isModified,
	cydEnabled,
	taskId,
	refetch,
}) {
	const titleObj = {
		暗链: '暗链数',
		坏链: '坏链数',
		风险外链: '风险外链数',
	};
	const [selected, setSelected] = React.useState({});
	const tableData = data[title] || [];
	const nodeRef = React.useRef();
	const handleCheckChange = (val, id) => {
		setSelected({ ...selected, [id]: val });
	};

	const handleAllCheckboxChange = x => {
		const currentSelected = tableData.reduce((obj, w) => {
			obj[w.id] = x;
			return obj;
		}, {});
		setSelected(currentSelected);
	};

	const handleResetSelected = () => {
		setSelected({});
	};
	const linkSUM = d => {
		const title = d.title;
		if (title === '暗链') {
			return d.detail.links.length;
		} else if (title === '坏链') {
			return d.detail.length;
		} else {
			const key = Object.keys(d.detail);
			return key.length;
		}
	};
	const style = { display: 'flex', 'align-items': 'center' };
	const allChecked = tableData.every(x => selected[x.id]);
	return (
		<div className={cn(className, s.tableWapper)} ref={nodeRef}>
			<div className={s.title}>
				{title}
				<span className={s.num}>({tableData.length})</span>
				<Tooltip
					placement="top"
					overlay={<span>{title === '坏链' ? '低危' : '高危'}</span>}
				>
					<span style={style}>
						<Icon grade={title === '坏链' ? 1 : 3} />
					</span>
				</Tooltip>
			</div>
			<div className={s.tableContainer}>
				<table className={s.table}>
					<thead>
						<tr className={s.head}>
							<td className={s.checkCol}>
								{isModified && (
									<span className={s.checkbox}>
										<Input
											type="checkbox"
											checked={allChecked}
											disabled={tableData.length === 0}
											onChange={handleAllCheckboxChange}
										/>
									</span>
								)}
							</td>
							<td
								className={cn(titleObj.hasOwnProperty(title) ? s.url : s.url2)}
							>
								风险地址
							</td>
							{titleObj.hasOwnProperty(title) ? (
								<td className={s.status}>{titleObj[title]}</td>
							) : null}
							<td className={s.status}>状态</td>
							<td className={s.action}>操作</td>
						</tr>
					</thead>
					<tbody>
						{tableData.map(d => (
							<tr key={d._id}>
								<td className={s.checkCol}>
									{isModified && (
										<span className={s.checkbox}>
											<Input
												type="checkbox"
												checked={selected[d.id]}
												onChange={e => handleCheckChange(e, d.id)}
											/>
										</span>
									)}
								</td>
								<td>
									<CopyBoard className={s.affect} text={d?.affects} />
								</td>
								{titleObj.hasOwnProperty(title) ? (
									<td className={s.status}>{linkSUM(d)}</td>
								) : null}
								<td>
									{warningStatsBuilder(d)}
									{isModified && (
										<WarningsStatusEdit
											controlText="处理"
											refetch={refetch}
											taskId={taskId}
											key={d.id}
											getTooltipContainer={() => nodeRef?.current}
											idsObj={{ [d.id]: true }}
										/>
									)}
								</td>
								<td>
									<Link
										to={{
											pathname: `/job-manage/web-task/securityEvent-detail/${taskId}/DetailP`,
											sendState: { id: d._id, title: d.title, cydEnabled },
										}}
									>
										详情
									</Link>
									{/* <EventDetail
										category={d.category}
										warning={d}
										taskId={taskId}
										cydEnabled={cydEnabled}
									/> */}
								</td>
							</tr>
						))}
					</tbody>
				</table>
				{tableData.length === 0 && <Empty borderless />}
			</div>
			{isModified ? (
				<WarningsStatusEdit
					controlText="处理"
					reset={handleResetSelected}
					refetch={refetch}
					taskId={taskId}
					idsObj={selected}
					isBatchSetting={true}
					getTooltipContainer={() => nodeRef?.current}
				/>
			) : (
				<div className={s.space}></div>
			)}
		</div>
	);
}

Table.propTypes = {
	className: PropTypes.string,
	title: PropTypes.string.isRequired,
	data: PropTypes.object,
	isModified: PropTypes.bool,
	taskId: PropTypes.string,
	refetch: PropTypes.func,
	cydEnabled: PropTypes.bool,
};
Table.defaultProps = {
	className: '',
	isModified: true,
	data: [],
};

export default Table;
